<template>
  <el-container>
    <el-header>
      <div class="logo">
        <img src="../assets/logo.png" srcset="">
        <h1>青芒电商后台管理系统</h1>
      </div>
      <el-button @click="loginOut">退出</el-button>
    </el-header>
    <el-container>
      <!-- 侧边栏 -->
      <el-aside width="200px">
        <!-- 导航栏6  unique-opened 每次只开一个子菜单,index 必须唯一,字符串 router,index就是path  -->
        <el-menu background-color="#333744" text-color="#fff" active-text-color="#409EFF" unique-opened router>
          <el-submenu :index="item.id + ''" v-for="item in menulist" :key="item.id">
            <!-- 使用的而是插槽 -->
            <template slot="title">
              <!-- 对象的键值对象,vue class的绑定 -->
              <i class="icon iconfont" :class="[iconObj[item.id]]"></i>
              <span>{{ item.authName }}</span>
            </template>
            <!-- 下拉的子类 -->
            <el-menu-item :index="'/home/' + son.path" v-for="son in item.children" :key="son.id">
              <template slot="title">
                <i class="el-icon-menu"></i>
                <span>{{ son.authName }}</span>
              </template>
            </el-menu-item>
          </el-submenu>
        </el-menu>
      </el-aside>
      <el-main>
        <!-- 二级路由 -->
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import request from '@/utils/request';
export default {
  data () {
    return {
      menulist: [],
      iconObj: {
        125: "icon-user",
        103: "icon-tijikongjian",
        101: "icon-shangpin",
        102: "icon-danju",
        145: "icon-baobiao"
      }
    }
  },
  // 数据挂在后,自动调用获取数据
  mounted () {
    this.getMenu()
  },
  methods: {

    async getMenu () {
      const { data: { data } } = await request({
        // const back = await request({
        url: "/menus",
        method: "GET"
        // // 在请求方法中,添加请求头
        // headers: {
        //   Authorization: "Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1aWQiOjUwMCwicmlkIjowLCJpYXQiOjE3MTI2NTEwNDgsImV4cCI6MTcxMjczNzQ0OH0.rjo2QsR7CVrHz9xgrmmmxRcNX17oQJ_D2aJqJ8mfbug"
        // }
      })
      this.$data.menulist = data
      // console.log(data, meta);
      // console.log(back);
      // back.then((data) => {
      //   console.log(data);
      // })
    },
    // 退出的方法,跳转到login,清除token
    loginOut () {
      // 编程式导航,通过路由 router  路线rout
      this.$router.push("/login")
      // 单独清空一个变量
      // sessionStorage.removeItem("token")
      // 清除所有
      sessionStorage.clear()
    }
  }
}
</script>

<style scoped lang="less">
.el-container {
  height: 100vh;
}

.el-header {
  background-color: #373D41;
  color: #fff;
  display: flex;
  justify-content: space-between;
  padding: 0px;

  .logo {
    overflow: hidden;
    height: 60px;
    display: flex;

    img {
      margin-top: -20px;
      width: 200px;
      height: 200px;
    }

    h1 {
      height: 60px;
      font-size: 20px;
      line-height: 60px;
    }
  }

  .el-button {
    height: 40px;
    margin-top: 10px;
    margin-right: 40px;
  }
}

.el-aside {
  background-color: #333744;

  .el-menu {
    border: none;
  }
}

.el-main {
  background-color: #EAEDF1;
}
</style>
